<!--
* @author wn
* @date 2022/09/14 09:32:23
* @description: 订单选项卡 结构页面
!-->
<template>
	<div class="order-item" v-if="order.id">
		<div class="head">
			<span>下单时间：{{ order.createTime }}</span>
			<span>订单编号：{{ order.id }}</span>
			<!-- 未付款，orderState === 1 -->
			<span v-if="order.orderState === 1" class="down-time">
				<i class="iconfont icon-down-time"></i>
				<b>付款截止：{{ timeText }}</b>
			</span>
			<!-- 已完成  或者  已取消   5,6 -->
			<a
				v-if="[5, 6].includes(order.orderState)"
				@click="$emit('on-delete', order.id)"
				href="javascript:;"
			>
				删除
			</a>
		</div>
		<div class="body">
			<div class="column column-goods">
				<div v-for="sku in order.skus" :key="sku.id">
					<router-link :to="`/product/${sku.spuId}`" href="javascript:;">
						<img v-lazy="sku.image" alt="" />
					</router-link>
					<div class="info">
						<p class="name ellipsis-2">{{ sku.name }}</p>
						<p class="attr ellipsis">{{ sku.attrsText }}</p>
					</div>
					<p>¥ {{ sku.realPay }}</p>
					<p>x {{ sku.quantity }}</p>
				</div>
			</div>

			<!-- 待收货：查看物流 -->
			<!-- 待评价：评价商品 -->
			<!-- 已完成：查看评价 -->
			<div class="column column-state">
				<p v-if="order.orderState === 1">待付款</p>
				<p v-if="order.orderState === 2">待发货</p>
				<!-- 只有发货才可以查看  这里 查看 物流 绑定在 取消 -->
				<p v-if="order.orderState === 3">
					<a
						class="green"
						@click="$emit('on-logistics', order)"
						href="javascript:;"
					>
						查看物流
					</a>
				</p>
				<p v-if="order.orderState === 4">
					<a class="green" href="javascript:;">评价商品</a>
				</p>
				<p v-if="order.orderState === 5">
					<a class="green" href="javascript:;">查看评价</a>
				</p>
				<p v-if="order.orderState === 6">已取消</p>
			</div>
			<div class="column column-amount">
				<p class="red">¥ {{ order.payMoney }}</p>
				<p>（含运费：¥ {{ order.postFee }}）</p>
				<p>在线支付</p>
			</div>
			<!-- 待支付：立即付款，查看详情，取消订单 -->
			<!-- 待发货：查看详情，再次购买 -->
			<!-- 待收货：确认收货，查看详情，再次购买 -->
			<!-- 待评价：查看详情，再次购买，申请售后 -->
			<!-- 已完成：查看详情，再次购买，申请售后 -->
			<!-- 已取消：查看详情 -->
			<div class="column column-action">
				<XtxButton
					v-if="order.orderState === 1"
					@click="$router.push(`/member/pay?orderId=${order.id}`)"
					type="primary"
					size="small"
				>
					立即付款
				</XtxButton>
				<XtxButton
					v-if="order.orderState === 3"
					@click="$emit('on-confirm', order)"
					type="primary"
					size="small"
				>
					确认收货
				</XtxButton>
				<router-link :to="`/member/order/${order.id}`" href="javascript:;">
					查看详情
				</router-link>
				<a
					v-if="order.orderState === 1"
					@click="$emit('on-cancel', order)"
					href="javascript:;"
				>
					取消订单
				</a>
				<router-link
					v-if="[2, 3, 4, 5].includes(order.orderState)"
					:to="`/member/checkout?orderId=${order.id}`"
					href="javascript:;"
				>
					再次购买
				</router-link>
				<a v-if="[4, 5].includes(order.orderState)" href="javascript:;">
					申请售后
				</a>
			</div>
		</div>
	</div>
</template>
<script>
import { useCountDownBtn } from '@/hooks'
import { computed } from 'vue'
export default {
	name: 'OrderItem',
	props: {
		order: {
			type: Object,
			default: () => ({}),
		},
	},
	emits: ['on-cancel', 'on-delete', 'on-confirm', 'on-logistics'],
	setup(props) {
		// 倒计时 显示 format = true
		const { time, timeText, resumeForFirst } = useCountDownBtn(true)
		const mySeconds = computed(() => props.order.countdown)
		time.value = mySeconds.value
		resumeForFirst()

		return { timeText }
	},
}
</script>
<style scoped lang="less">
.order-item {
	margin-bottom: 20px;
	border: 1px solid #f5f5f5;
	.head {
		font-size: 16px;
		line-height: 50px;
		background-color: #f5f5f5;
		> span {
			margin-left: 20px;
		}
		.down-time {
			float: right;
			margin: 0 20px 0 0;
			> i,
			b {
				margin-right: 3px;
				vertical-align: middle;
			}
			> b {
				margin-right: 0;
			}
		}
		> a {
			float: right;
			margin-right: 20px;
			color: #999;
		}
	}
	.body {
		display: flex;
		width: 100%;
		.column {
			font-size: 16px;
			line-height: 2;
			text-align: center;
			border-right: 1px solid #f5f5f5;
			padding-top: 20px;
			&:last-child {
				border-right: none;
			}
			&-goods {
				flex: 1;
				padding-top: 0;
				> div {
					display: flex;
					padding: 10px;
					border-bottom: 1px solid #f5f5f5;
					&:last-child {
						border-bottom: none;
					}
					img {
						width: 70px;
						height: 70px;
						border: 1px solid #f5f5f5;
					}
					.info {
						flex: 1;
						margin-left: 10px;
						line-height: 1.5;
						text-align: left;
						.attr {
							color: #999;
							font-size: 14px;
						}
					}
					> p {
						width: 100px;
					}
				}
			}
			&-state {
				width: 120px;
				.green {
					color: @xtxColor;
				}
			}
			&-amount {
				width: 200px;
				.red {
					color: @priceColor;
				}
			}
			&-action {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 140px;
				& > * {
					margin-bottom: 8px;
				}
				> a {
					&:hover {
						color: @xtxColor;
					}
				}
			}
		}
	}
}
</style>
